<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<a-layout-content
					style="position: relative;background: #ffffff !important;">
				<right-top icon="6.png" text="热点追踪">

					<div style="background-color:#00b14e;color:white;" class="addyj" @click="showWarning"><span
							style="margin-left:20px;cursor:pointer;font-size: 14px;">添加预警</span></div>

					<a-tabs default-active-key="2" style="position: absolute;right: 40px;top: 22px;font-weight: 400;" size="small"
					        @change="callback">
						<a-tab-pane key="1" tab="热点总览"></a-tab-pane>
						<a-tab-pane key="2" tab="预警管理" force-render></a-tab-pane>
					</a-tabs>
				</right-top>
				<div class="right-content" v-show="change==1">
					<div class="main">
						<div class="one">
							<div class="one_left" style="">
								<div
										style="width:16%;color:black;display:table-cell;text-align: center;vertical-align: middle;padding-top:20px;font-size:14px">
									过去24小时整体热度
								</div>
								<div style="width:15%;color:orange;font-size:25px;padding-top:10px;font-weight: bold">
									240,511,670
								</div>
								<div
										style="width:14%;color:black;display:table-cell;text-align: center;vertical-align: middle;padding-top:20px;font-size:14px">
									过去7天单日热度均值
								</div>
								<div style="width:16%;color:blue;font-size:25px;padding-top:10px;font-weight: bold">4,951,167</div>
							</div>
							<div class="one_right">
								<div :class="{changeStyle:changeSelectStyle == '全部'}" style="cursor: pointer"
								     @click="changeStyle(1)">全部
								</div>
								<div :class="{changeStyle:changeSelectStyle == '微博热搜'}" style="cursor: pointer"
								     @click="changeStyle(2)">微博热搜
								</div>
								<div :class="{changeStyle:changeSelectStyle == '百度热搜'}" style="cursor: pointer"
								     @click="changeStyle(3)">百度热搜
								</div>
								<div :class="{changeStyle:changeSelectStyle == '今日头条'}" style="cursor: pointer"
								     @click="changeStyle(4)">今日头条
								</div>
							</div>
						</div>
						<div class="two">
							<div class="two_left">
								<div style="height:7%;width:100%;margin-left:10px">
									<span style="padding-top:40px;border-bottom:2px solid #1375ff;font-size:15px">近期</span>热搜热度走势
								</div>
								<div style="height:500px;width:1083px" ref="chart1"></div>
							</div>
							<div class="two_right">
								<div style="height:7%;width:100%;margin-left:10px;display:flex">
									<div style="width:50%">
										<span style="padding-top:40px;border-bottom:2px solid #1375ff;font-size:15px">近期</span>热搜热度排名TOP10
									</div>
									<div style="width:50%">
										<a-col :span="20">
											<a-form-item label="榜单时间" class="bangdan">
												<a-select default-value="1">
													<a-select-option value="1">
														实时（10时）
													</a-select-option>
													<a-select-option value="2">
														实时（20时）
													</a-select-option>
													<a-select-option value="3">
														实时（30时）
													</a-select-option>
												</a-select>
											</a-form-item>
										</a-col>
									</div>
								</div>
								<div style="border:1px solid #eeeeee;height:93%;width:100%;overflow-y: auto">
									<a-list
											class="demo-loadmore-list"
											:loading="loading"
											item-layout="horizontal"

									>
										<div
												v-if="showLoadingMore"
												slot="loadMore"
												:style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
										>
											<a-spin v-if="loadingMore"/>
											<a-button v-else @click="onLoadMore">
												查看完整榜单
											</a-button>
										</div>
										<a-list-item v-for="(item,index) in weibomsg">
											<a slot="actions" v-if="item.flag=='沸'"
											   style="border:1px solid orange;background-color:#fa6b02;color:white;border-radius:4px;padding-left:1px;padding-right:1px;font-size:5px">沸</a>
											<a slot="actions" v-if="item.flag==''||item.flag==null||item.flag==undefined"
											   style="border:1px solid white;background-color:white;color:white;border-radius:4px;margin-left:1px;padding-right:1px;font-size:5px">'
												'</a>
											<a slot="actions" v-if="item.flag=='热'"
											   style="border:1px solid orange;background-color:#fd9404;color:white;border-radius:4px;padding-left:1px;padding-right:1px;font-size:5px">热</a>

											<a-list-item-meta
											>
												<a slot="title" style="margin-right:20px;color:orange;font-weight: bold">{{ index + 1 }}</a>
												<a slot="title" @click="totals()">{{ item.title }}</a>
											</a-list-item-meta>
											<div style="padding-left:5px">{{ item.num }}</div>
										</a-list-item>
									</a-list>
								</div>

							</div>
						</div>
						<div class="three">
							<div class="three_left">
								<div style="height:7%;width:100%;margin-left:10px;display:flex;">
									<div style="width:50%">
										<span style="padding-top:40px;border-bottom:2px solid #1375ff;font-size:15px">近期</span>30天热点事件趋势
									</div>
									<div style="" class="button01">
										<div :class="{changeStyles:changeSelectStyles == '全部'}" style="cursor: pointer"
										     @click="changeStyles(1)">全部
										</div>
										<div :class="{changeStyles:changeSelectStyles == '社会'}" style="cursor: pointer"
										     @click="changeStyles(2)">社会
										</div>
										<div :class="{changeStyles:changeSelectStyles == '互联网'}" style="cursor: pointer"
										     @click="changeStyles(3)">互联网
										</div>
										<div :class="{changeStyles:changeSelectStyles == '娱乐'}" style="cursor: pointer"
										     @click="changeStyles(4)">娱乐
										</div>

										<div :class="{changeStyles:changeSelectStyles == '国际'}" style="cursor: pointer"
										     @click="changeStyles(5)">国际
										</div>
										<div :class="{changeStyles:changeSelectStyles == '财经'}" style="cursor: pointer"
										     @click="changeStyles(6)">财经
										</div>
										<div :class="{changeStyles:changeSelectStyles == '游戏'}" style="cursor: pointer"
										     @click="changeStyles(7)">游戏
										</div>


									</div>
								</div>
								<div style="" class="chart0" ref="chart2"></div>
							</div>
							<div class="three_right">
								<div style="height:7%;width:100%;margin-left:10px">
									<span style="padding-top:40px;border-bottom:2px solid #1375ff;font-size:15px">近期</span>30天最高热点事件详情
								</div>
								<div style="" class="chart1">
									<div style="width:100%;height:10%;display:flex;margin-top:20px;margin-left:20px">
										<div style="width:90%;font-size:14px">
											广电总局要求坚决抵制耽改之风等泛娱乐化
										</div>
										<div style="width:10%;">
											<span style="color:white;background-color:#1375ff;padding:2px;border-radius:5px">社会</span>
										</div>
									</div>
									<div style="width:100%;height:15%;margin-left:20px;margin-right:20px;font-size:12px;color:#7d7d7d">
										<span>2021年9月17日，据媒体报道:国家广播电视总局16日在京召开会议要求，严格执行电视剧片酬管理规定，坚决抵制天价片酬、“阴阳合同”、偷逃税:加强电视剧创作生产正面引导，坚决抵制流量至上、“饭圈”乱象、 “耽改...</span>

									</div>
									<div style="width:100%;height:5%;;margin-left:20px;margin-right:20px;">
										<span>事件影响力</span>
									</div>
									<div style="width:100%;height:10%;display:flex;margin-left:20px">
										<div style="width:80%">
											<a-progress :percent="90" showInfo="false" strokeColor='#eb6100' size="small"/>
										</div>
										<div style="width:20%">
											<img src="../../assets/images/generalDetection/6.png" style="margin-right: 3px;"/>
											<span style="font-weight: bold">90.7</span>
										</div>
									</div>
									<div style="width:441px;;height:261px;padding-left:20px" ref="chart3">
									</div>
								</div>

							</div>
						</div>

					</div>
				</div>

				<div class="right-content" v-show="change==2">
					<div style="width: 100%;height: 10%;padding-top: 2%">
						<div>
							<button
									style="background-color: #FF7E16;color: white;border: none;height: 25px;width: 50px;margin-left: 4%;">
								监测中
							</button>
							<span style="margin-left: 1%;font-size: 16px;font-weight: bold;">移动断卡涉案</span>
							<span style="margin-left: 73%">排名新高：前 <span style="color: #FF7E16;">5</span> </span>
						</div>
						<div style="padding-top: 1%;">
							<span style="padding-left: 8%">关键字：移动公司,中国移动,断卡,涉案</span>
							<span style="padding-left: 21%">预警平台：微博热搜、百度热搜、今日头条</span>
							<span style="padding-left: 15%">预警范围：2021-11-01 00:00:00</span>
							<span style="padding-left: 1%;padding-right: 1%;">~</span>
							<span>2021-12-31 00:00:00</span>
						</div>
					</div>

					<div style="" class="buttonDiv">
						<!--左边-->
						<div style="width: 45%;height: 100%;margin-left: 5%;background-color: #F7F7F7;">
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">11:09:58</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;" @click="weibosofo">
										<span style="color: red;">中国移动</span>推动算力服务供给侧结构性改革
									</div>
									<div style="margin-top: 1%">
										<button class="buttonList" @click="weibosofo"
										        style="background-color: #FF6316;color: white;border: none;height: 25px;width: 80px;border-radius: 3px">
											微博热搜
										</button>
									</div>
									<div style="margin-top: 1%;padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>

							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">11:03:42</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										“万亿巨头”<span style="color: red">中国移动</span>回归A股，当然不只是为了560亿元
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											百度热搜
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">11:00:26</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										<span style="color: red">中国移动</span>首发过会，运营商三巨头聚首A股在即
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #01B14E;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:49:36</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										冯清来、张跃文合同纠纷二审民事判决书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:43:11</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										于伟东、姜瑞春劳务合同纠纷二审民事判决书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:41:31</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										北镇市青堆子镇葛忠学养殖场、中国联合网络通信有限公司北镇市分公司财产损害赔偿纠纷二审民事判决书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>

							<div style="position: relative;left: 95%;top: -75%;">
								<img src="../../assets/images/hotspottracking/5.png" alt="" height="400px">
							</div>

						</div>
						<!--右边-->
						<div style="width: 45%;height: 100%;background-color: #F7F7F7;">
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">11:36:54</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										广东东泰五金精密制造有限公司侵害发明专利权纠纷一审民事判决书
									</div>
									<div style="margin-top: 1%">
										<button class="buttonList"
										        style="background-color: #FF6316;color: white;border: none;height: 25px;width: 80px;border-radius: 3px">
											微博热搜
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>

							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:32:38</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										郭世明与宁夏林威房地产开发有限公司、银川北方恒通物业服务有限公司房屋买卖合同纠纷一审民事判决书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											百度热搜
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:27:48</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										陈声安、陈声安非法利用信息网络罪再审审查与审判监督刑事通知书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #01B14E;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:23:47</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										刘素杰与陈隆合同纠纷一审民事判决书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:20:36</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										徐某、扈某赡养费纠纷二审民事判决书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
							<div style="display: flex;">
								<div style="width: 90%;display: flex;padding-left: 4%;padding-top: 4%;">
									<div style="">2021-12-10 <br> <span style="margin-left: 3%">10:18:16</span></div>

									<img src="../../assets/images/hotspottracking/4.png" alt=""
									     style="margin-left: 3%;margin-top: -3%;height: 155%">
									<div style="margin-left: 3%;margin-top: 1%;width: 50%;cursor: pointer;">
										王水根与张志华建设工程施工合同纠纷一审民事判决书
									</div>
									<div style="">
										<button class="buttonList"
										        style="background-color: #1777FF;color: white;border: none;height: 25px;width: 80px;margin-left: 4%;border-radius: 3px">
											今日头条
										</button>
									</div>
									<div style="padding-left: 2%;">
										<button class="buttonList" @click="addLetters"
										        style="border: none;height: 25px;width: 80px;border-radius: 3px">生成快报
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>

					<a-modal class="modal-box2" v-model="visible3" title="添加快报" width="700px" @ok="hideModal3"
					         ok-text="确定保存" style="height:300px" :cancel-button-props="{ style: { display: 'none' } }">
						<div style="height:600px;overflow-y:auto">
							<a-row>
								<a-form-model
										ref="ruleForm"
										:model="form"
										:rules="rules"
										:label-col="labelCol1"
										:wrapper-col="wrapperCol1"
								>

									<a-form-model-item ref="title" label="事件标题" prop="title">
										<a-input
												v-model="form.title"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>

									<a-row>
										<a-col :span="12">
											<a-form-model-item label="报送时间:" required prop="submittime" style="margin-left:20px">
												<a-date-picker
														v-model="form.submittime"
														show-time
														type="date"
														placeholder="请选择"
														style="width: 73%;margin-left:20px"
												/>

											</a-form-model-item>
										</a-col>
										<a-col :span="12">
											<a-form-model-item label="发送时间:" prop="sendtime">
												<a-date-picker
														v-model="form.sendtime"
														show-time
														type="date"
														placeholder="请选择"
														style="width: 73%;margin-left:20px"
												/>

											</a-form-model-item>
										</a-col>
									</a-row>
									<a-form-model-item ref="name" label="发布媒体" prop="sendmedia">
										<a-input
												v-model="form.sendmedia"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>
									<a-form-model-item label="事件等级" prop="eventType">
										<a-select v-model="form.eventType" placeholder="请选择">
											<a-select-option value="1">
												重大
											</a-select-option>
											<a-select-option value="2">
												中等
											</a-select-option>
											<a-select-option value="3">
												一般
											</a-select-option>
										</a-select>
									</a-form-model-item>

									<a-row style="margin-left:22px">
										<a-col :span="11">

											<a-form-model-item label="事件分类" prop="eventclasssify">
												<a-select v-model="form.eventclasssify" placeholder="请选择" class="eventtype"
												          @change="event_classify">
													<a-select-option value="1">
														不良信息
													</a-select-option>
													<a-select-option value="2">
														网络安全
													</a-select-option>
													<a-select-option value="3">
														运营商负面
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="6">
											<a-form-model-item label="">
												<a-select v-model="form.eventclasssify1" placeholder="请选择" class="eventtype1"
												          @change="event_classify1">
													<a-select-option :value="index" v-for="(index,key) in two_classify">
														{{ index }}
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="6">
											<a-form-model-item label="">
												<a-select v-model="form.eventclasssify2" placeholder="请选择" class="eventtype2">
													<a-select-option :value="key" v-for="(index,key) in three_classify">
														{{ index }}
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>

									</a-row>
									<a-form-model-item ref="name" label="关键词" prop="key">
										<a-input
												v-model="form.key"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>

									<a-form-model-item label="内容简介" prop="content">
										<a-input v-model="form.content" type="textarea"/>
									</a-form-model-item>
									<a-form-model-item ref="name" label="原文链接" prop="originallink">
										<a-input
												v-model="form.originallink"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>
									<a-form-model-item ref="name" label="原文标题" prop="origintitle">
										<a-input
												v-model="form.origintitle"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>
									<a-row>
										<a-col :span="13">
											<a-form-model-item label="移动相关" prop="mobilerelated" style="margin-left:25px">
												<a-select v-model="form.mobilerelated" placeholder="请选择" class="eventtype">
													<a-select-option value="shanghai">
														是
													</a-select-option>
													<a-select-option value="beijing">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="11">
											<a-form-model-item label="业务影响" prop="businessimpact">
												<a-select v-model="form.businessimpact" placeholder="请选择" class="eventtype3">
													<a-select-option value="1">
														市场营销
													</a-select-option>
													<a-select-option value="2">
														客户投诉
													</a-select-option>
													<a-select-option value="3">省公司</a-select-option>
													<a-select-option value="4">专业公司</a-select-option>
													<a-select-option value="5">政企业务</a-select-option>
													<a-select-option value="6">网络安全</a-select-option>
													<a-select-option value="7">网络攻击</a-select-option>
													<a-select-option value="8">数据安全</a-select-option>
													<a-select-option value="9">软件</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row style="margin-left:22px">
										<a-col :span="11">

											<a-form-model-item label="省份">
												<a-select v-model="form.province01" placeholder="请选择" class="eventtype">
													<a-select-option value="shanghai">
														Zone one
													</a-select-option>
													<a-select-option value="beijing">
														Zone two
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="6">
											<a-form-model-item label="">
												<a-select v-model="form.province02" placeholder="请选择" class="eventtype1">
													<a-select-option value="shanghai">
														Zone one
													</a-select-option>
													<a-select-option value="beijing">
														Zone two
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="6">
											<a-form-model-item label="">
												<a-select v-model="form.province03" placeholder="请选择" class="eventtype2">
													<a-select-option value="shanghai">
														Zone one
													</a-select-option>
													Zone two

													<a-select-option value="beijing">
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>

									</a-row>
									<a-row>
										<a-form-model-item label="关联部门" prop="relatedepart" class="checkboxs">
											<div style="z-index: 999; padding-left:5px;background-color:#ebf3fe"><span>信安中心</span>
												<img src="../../assets/images/generalDetection/28.jpg" :style="xazx_c?'':'display:none'" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showxazx">
												<img src="../../assets/images/generalDetection/27.jpg" :style="xazx_c?'display:none':''" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showxazx">
											</div>
											<a-checkbox-group v-model="form.xazx" v-if="xazx_c">
												<div>
													<a-checkbox value="1" name="type">综合部</a-checkbox>
													<a-checkbox value="2" name="type">策略运营中心</a-checkbox>
													<a-checkbox value="3" name="type">品质管理处</a-checkbox>
													<a-checkbox value="4" name="type">规划技术处</a-checkbox>
												</div>
												<div>
													<a-checkbox value="5" name="type">工程维护中心</a-checkbox>
													<a-checkbox value="6" name="type">研究支撑中心</a-checkbox>
												</div>
											</a-checkbox-group>
											<div style="z-index:999; padding-left:5px;background-color:#ebf3fe"><span>集团</span>

												<img src="../../assets/images/generalDetection/28.jpg" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     :style="jt_c?'display:block':'display:none'" @click="showjt">
												<img src="../../assets/images/generalDetection/27.jpg" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     :style="jt_c?'display:none':'display:block'" @click="showjt"></div>
											<a-checkbox-group v-model="form.jt" v-if="jt_c">
												<div>
													<a-checkbox value="1" name="type">市场经营部</a-checkbox>
													<a-checkbox value="2" name="type">客户服务部</a-checkbox>
													<a-checkbox value="3" name="type">网络事业部</a-checkbox>
													<a-checkbox value="4" name="type">IT中心</a-checkbox>
												</div>
												<div>
													<a-checkbox value="5" name="type">集团办公室</a-checkbox>
												</div>
											</a-checkbox-group>
											<div style="z-index: 999;padding-left:5px;background-color:#ebf3fe"><span>省公司</span>
												<img src="../../assets/images/generalDetection/28.jpg"
												     :style="sgs_c?'display:block':'display:none'" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showsgs">
												<img src="../../assets/images/generalDetection/27.jpg"
												     :style="sgs_c?'display:none':'display:block'" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showsgs">
											</div>
											<a-checkbox-group v-model="form.sgs" v-if="sgs_c">
												<a-checkbox value="1" name="type">天津市</a-checkbox>
												<a-checkbox value="2" name="type">北京市</a-checkbox>
												<a-checkbox value="3" name="type">上海市</a-checkbox>
												<a-checkbox value="4" name="type">重庆市</a-checkbox>
												<a-checkbox value="5" name="type">河北省</a-checkbox>
												<a-checkbox value="6" name="type">河南省</a-checkbox>
												<a-checkbox value="7" name="type">云南省</a-checkbox>
												<a-checkbox value="8" name="type">辽宁省</a-checkbox>
												<a-checkbox value="9" name="type">黑龙江省</a-checkbox>
												<a-checkbox value="10" name="type">湖南省</a-checkbox>

												<a-checkbox value="11" name="type">安徽省</a-checkbox>
												<a-checkbox value="12" name="type">山东省</a-checkbox>
												<a-checkbox value="13" name="type">江苏省</a-checkbox>
												<a-checkbox value="14" name="type">浙江省</a-checkbox>

												<a-checkbox value="15" name="type">江西省</a-checkbox>
												<a-checkbox value="16" name="type">湖北省</a-checkbox>
												<a-checkbox value="17" name="type">甘肃省</a-checkbox>
												<a-checkbox value="18" name="type">山西省</a-checkbox>

												<a-checkbox value="19" name="type">陕西省</a-checkbox>
												<a-checkbox value="20" name="type">吉林省</a-checkbox>
												<a-checkbox value="21" name="type">福建省</a-checkbox>
												<a-checkbox value="22" name="type">贵州省</a-checkbox>
												<a-checkbox value="23" name="type">广东省</a-checkbox>
												<a-checkbox value="24" name="type">四川省</a-checkbox>
												<a-checkbox value="25" name="type">青海省</a-checkbox>
												<a-checkbox value="26" name="type">台湾省</a-checkbox>
												<a-checkbox value="27" name="type">海南市</a-checkbox>
												<a-checkbox value="28" name="type">新疆维吾尔自治区</a-checkbox>
												<a-checkbox value="29" name="type">广西壮族自治区</a-checkbox>
												<a-checkbox value="30" name="type">宁夏回族自治区</a-checkbox>
												<a-checkbox value="31" name="type">内蒙古自治区</a-checkbox>
												<a-checkbox value="32" name="type">西藏自治区</a-checkbox>
												<a-checkbox value="33" name="type">香港特别行政区</a-checkbox>
												<a-checkbox value="34" name="type">澳门特别行政区</a-checkbox>
											</a-checkbox-group>
											<div style="z-index: 999;padding-left:5px;background-color:#ebf3fe"><span>专业公司</span>
												<img src="../../assets/images/generalDetection/28.jpg" :style="zygs_c?'':'display:none'" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showzygs">
												<img src="../../assets/images/generalDetection/27.jpg" :style="zygs_c?'display:none':''" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showzygs"></div>
											<a-checkbox-group v-model="form.zygs" v-if="zygs_c">
												<a-checkbox value="1" name="type">专业1</a-checkbox>
												<a-checkbox value="2" name="type">专业2</a-checkbox>
												<a-checkbox value="3" name="type">专业3</a-checkbox>
											</a-checkbox-group>

											<div style="z-index: 999;padding-left:5px;background-color:#ebf3fe"><span>其他</span>
												<img src="../../assets/images/generalDetection/28.jpg"
												     :style="qt_c?'display:block':'display:none'" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showqt">
												<img src="../../assets/images/generalDetection/27.jpg"
												     :style="qt_c?'display:none':'display:block'" alt=""
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showqt">
											</div>
											<a-checkbox-group v-model="form.relatedepart" v-if="qt_c">
												<a-checkbox value="1" name="type">不良信息策略运营</a-checkbox>

											</a-checkbox-group>

										</a-form-model-item>
									</a-row>
									<a-row>
										<a-col :span="15">
											<a-form-model-item label="是否热搜" prop="ifsearch" style="margin-left:24px" class="eventtype4">
												<a-select v-model="form.ifsearch" placeholder="" @change="ifresou">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row v-show="resou_event">
										<a-col :span="13">
											<a-form-model-item ref="searchlist" label="热搜榜" prop="searchlist" style="margin-left:25px">
												<a-input style="margin-left :20px;width:180px"
												         v-model="form.searchlist"
												         @blur="() => {$refs.name.onFieldBlur();}"
												/>
											</a-form-model-item>

										</a-col>
										<a-col :span="11">
											<a-form-model-item ref="searchrank" label="热搜名次" prop="searchrank" style="margin-left:15px">
												<a-input style="margin-left:20px;width:180px"
												         v-model="form.searchrank"
												         @blur="() => {$refs.name.onFieldBlur();}"
												/>
											</a-form-model-item>

										</a-col>
									</a-row>
									<a-row>
										<a-col :span="15">
											<a-form-model-item label="是否诈骗" prop="ifzp" style="margin-left:24px" class="eventtype4">
												<a-select v-model="form.ifzp" placeholder="" @change="if_zhapian" default-value="1">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row v-show="zhapian_option">
										<a-col :span="24">
											<a-form-model-item label="诈骗事件" prop="zp_event" style="" class="checkboxs">
												<a-checkbox-group v-model="form.zp_event">
													<a-checkbox value="1" name="type">网络电信诈骗</a-checkbox>
													<a-checkbox value="2" name="type">兼职诈骗</a-checkbox>
													<a-checkbox value="3" name="type">刷单诈骗</a-checkbox>
													<a-checkbox value="4" name="type">游戏诈骗</a-checkbox>
													<a-checkbox value="5" name="type">新冠诈骗</a-checkbox>
													<a-checkbox value="6" name="type">投资诈骗</a-checkbox>
													<a-checkbox value="7" name="type">考试诈骗</a-checkbox>
													<a-checkbox value="8" name="type">社保诈骗</a-checkbox>
													<a-checkbox value="9" name="type">ETC诈骗</a-checkbox>
													<a-checkbox value="10" name="type">银行(卡)诈骗</a-checkbox>
													<a-checkbox value="11" name="type">快递诈骗</a-checkbox>
												</a-checkbox-group>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row>
										<a-col :span="15">
											<a-form-model-item label="是否漏洞" prop="ifld" style="margin-left:24px" class="eventtype4">
												<a-select v-model="form.ifld" placeholder="" @change="if_loudong">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row v-if="loudong_option">
										<a-col :span="24">
											<a-form-model-item label="漏洞事件" prop="ld_event" style="" class="checkboxs">
												<a-checkbox-group v-model="form.ld_event">
													<a-checkbox value="1" name="type">国家安全漏洞库</a-checkbox>
													<a-checkbox value="2" name="type">网络漏洞</a-checkbox>
												</a-checkbox-group>
											</a-form-model-item>
										</a-col>
									</a-row>

									<a-row>
										<a-col :span="15">
											<a-form-model-item label="漏洞库" style="margin-left:25px" prop="vulnerdata" class="eventtype4">
												<a-select v-model="form.vulnerdata" placeholder="" @change="loudongku">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>

									</a-row>

									<a-row v-if="loudongku_event">
										<a-col :span="12">
											<a-form-model-item label="漏洞公开日期" required prop="vulnepublic" style="margin-left:25px">
												<a-date-picker
														v-model="form.vulnepublic"
														show-time
														type="date"
														placeholder="请选择"
														style="width: 65%;margin-left:15px"
												/>
											</a-form-model-item>
										</a-col>
										<a-col :span="11">
											<a-form-model-item ref="CVEID" label="CVE ID" prop="CVEID">
												<a-input style="margin-left:30px;width:180px"
												         v-model="form.CVEID"
												         @blur="() => {$refs.name.onFieldBlur();}"
												/>
											</a-form-model-item>
										</a-col>
									</a-row>


								</a-form-model>


							</a-row>
						</div>
					</a-modal>
					<div style="text-align: center;margin-left: -10%;margin-top: 1%;height:60px">
						<button
								style="width: 65px;height: 30px;background-color: white;border: solid 1px #E5E5E5;border-radius: 3px"
								@click="goHomePage">返回
						</button>
					</div>
					<!-- <div style="height: 3%;"></div>-->
				</div>


				<a-modal v-model="visible" title="添加预警" width="650px" @ok="hideModal" ok-text="开始监测"
				         style="height:500px" :cancel-button-props="{ style: { display: 'none' } }" class="yujing">

					<a-form-model
							style="" class="addWarning">

						<a-row style="">
							<a-col :span="24">
								<a-form-model-item label="任务名称" :label-col="{span:6}" :wrapper-col="{span:10}">
									<a-input style=""/>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row style="margin-left: 0%;">
							<a-col :span="24">
								<a-form-model-item label="添加预警关键词" :label-col="{span:6}" :wrapper-col="{span:10}">
									<a-input style="margin-left: 0%;"/>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row style="width: 100%;">
							<a-col span="24" offset="6">
								<div style="margin-top: -1%;">
									<div style="">提示：1.在输入框中输入想要关注的词，字数在2-10个之间，如'苹果手机'</div>
									<div style="margin: 0 0 0 43px;">2.您将接收到，精确匹配'苹果手机'这个词的热搜信息</div>
								</div>
							</a-col>
						</a-row>
						<a-row style="margin-top: 1%;width: 100%;">
							<a-checkbox-group style="width: 100%;">
								<a-form-model-item label="添加预警平台" :label-col="{span:6}" :wrapper-col="{span:16}" style="">
									<a-col :span="8" style="">
										<a-checkbox value="A">
											微博热搜
										</a-checkbox>
									</a-col>
									<a-col :span="8">
										<a-checkbox value="B">
											百度热搜
										</a-checkbox>
									</a-col>
									<a-col :span="8">
										<a-checkbox value="C">
											今日头条
										</a-checkbox>
									</a-col>
								</a-form-model-item>
							</a-checkbox-group>

						</a-row>
						<a-row style="margin-top: 0%;">
							<a-form-model-item label="添加预警形式" :label-col="{span:6}" :wrapper-col="{span:18}">
								<a-col :span="4" style="margin-left: 7%;color: black">
									<span>排名新高</span>
								</a-col>
								<a-col :span="10" style="">
									<a-select
											label-in-value
											:default-value="{ key: 'lucy' }"
											style="width: 120px"
									>
										<a-select-option value="jack">
											前十
										</a-select-option>
										<a-select-option value="lucy">
											前五
										</a-select-option>
									</a-select>
								</a-col>
							</a-form-model-item>
						</a-row>
						<a-row>
							<a-col :span="4" style="margin-left: 25%;">
								<span style="margin-left: 32%;color: black">起始时间</span>
							</a-col>
							<a-col :span="8">
								<a-date-picker show-time>
									<template slot="renderExtraFooter">

									</template>
								</a-date-picker>
							</a-col>
						</a-row>
						<a-row style="margin-top: 2%;">
							<a-col :span="4" style="margin-left: 25%;">
								<span style="margin-left: 32%;color: black">结束时间</span>
							</a-col>
							<a-col :span="8">
								<a-date-picker show-time>
									<template slot="renderExtraFooter">

									</template>
								</a-date-picker>
							</a-col>
						</a-row>

						<a-row style="margin-left: 25%;margin-top: 2%;">
							<a-col :span="12">
								<a-form-model-item label="预警推送" :label-col="{span:4}" :wrapper-col="{span:5}">
									<a-switch default-checked style="margin-left: 10%"/>
								</a-form-model-item>
							</a-col>
							<a-col :span="8">
								<a-form-model-item label="是否订阅" :label-col="{span:4}" :wrapper-col="{span:10}">
									<a-switch default-checked style="margin-left: 10%"/>
								</a-form-model-item>
							</a-col>
						</a-row>
					</a-form-model>

				</a-modal>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {getInfo} from '@/api/system/info'
import {getIndexMiddle} from '@/api/home/home.js'


export default {
	name: "generalDetection",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			xazx_c: true,
			jt_c: true,
			sgs_c: true,
			zygs_c: true,
			qt_c: true,
			visible: false,
			loading: true,
			loadingMore: false,
			showLoadingMore: true,
			data: [],
			change: 2,
			listData: [],
			zhapian_option: false,
			loudong_option: false,
			resou_event: false,
			loudongku_event: false,
			one_classify: [],
			two_classify: [],
			three_classfy: [],
			visible3: false,
			collspanQuery: true,
			rules: {
				title: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				sendmedia: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				key: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				content: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				originallink: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				searchlist: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				CVEID: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				searchrank: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],
				origintitle: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},
					{min: 3, max: 5, message: '长度3-5', trigger: 'blur'},
				],

				region: [{required: true, message: 'Please select Activity zone', trigger: 'change'}],
				submittime: [{required: true, message: '请选择', trigger: 'change'}],
				sendtime: [{required: true, message: '请选择', trigger: 'change'}],
				province01: [{required: true, message: '请选择', trigger: 'change'}],
				province02: [{required: true, message: '请选择', trigger: 'change'}],
				province03: [{required: true, message: '请选择', trigger: 'change'}],
				eventType: [{required: true, message: '请选择', trigger: 'change'}],
				eventclasssify: [{required: true, message: '请选择', trigger: 'change'}],
				mobilerelated: [{required: true, message: '请选择', trigger: 'change'}],
				businessimpact: [{required: true, message: '请选择', trigger: 'change'}],
				ifsearch: [{required: true, message: '请选择', trigger: 'change'}],
				ifzp: [{required: true, message: '请选择', trigger: 'change'}],
				ifld: [{required: true, message: '请选择', trigger: 'change'}],
				vulnerdata: [{required: true, message: '请选择', trigger: 'change'}],
				zp_event: [{required: true, message: '请选择', trigger: 'change'}],
				ld_event: [{required: true, message: '请选择', trigger: 'change'}],
				relatedepart: [
					{
						type: 'array',
						required: true,
						message: 'Please select at least one activity type',
						trigger: 'change',
					},
				],
				resource: [
					{required: true, message: 'Please select activity resource', trigger: 'change'},
				],
				desc: [{required: true, message: 'Please input activity form', trigger: 'blur'}],
			},
			labelCol1: {span: 4},
			wrapperCol1: {span: 18},
			changebuttonSelectStyle: '全部',
			middle_value: '全部',
			pagination: {
				pageSize: 10,
				showSizeChanger: true,
				total: 0,
				showQuickJumper: true,
				showTotal: total => `共 ${total} 条`,
				pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
			},
			actions: [
				{type: 'star-o', text: '156'},
				{type: 'like-o', text: '156'},
				{type: 'message', text: '2'},
			],
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			form: {
				title: '',
				domain: '通用事件',
				classification: '全部',
				mediaType: 1,
			},
			orderBy: false,
			mediaFlag: 1,
			mediaStyle: 'background: #1677FF;color: #fff;cursor:pointer;',
			collspanMedia: true,
			total: 0,
			label: '',
			myChartBottomLine: undefined,
			myChartMediaBar: undefined,
			myChartScatter: undefined,
			myChartPie: undefined,
			dataLevelLine1: [12, 80, 79, 27, 99, 43, 33],
			dataLevelLine2: [11, 76, 94, 23, 29, 77, 53],
			dataLevelLine3: [67, 62, 65, 35, 44, 69, 52],
			dataLevelDate: [],
			changeSelectStyle: '全部',
			changeSelectStyles: '全部',
			weibomsg: [],
		}
	},
	methods: {
		showxazx() {
			this.xazx_c = !this.xazx_c
		},
		showjt() {
			console.log(1)
			this.jt_c = !this.jt_c
		},
		showsgs() {
			this.sgs_c = !this.sgs_c
		},
		showzygs() {
			this.zygs_c = !this.zygs_c
		},
		showqt() {
			this.qt_c = !this.qt_c
		},
		if_zhapian(value) {
			console.log(`selected ${value}`);
			if (value == 1) {
				this.zhapian_option = true;
			}
			if (value == 2) {
				this.zhapian_option = false
			}
		},
		if_loudong(value) {
			console.log(`selected ${value}`);
			if (value == 1) {
				this.loudong_option = true;
			}
			if (value == 2) {
				this.loudong_option = false
			}
		},
		ifresou(value) {
			console.log(`selected ${value}`);
			if (value == 1) {
				this.resou_event = true;
			}
			if (value == 2) {
				this.resou_event = false;
			}
		},
		loudongku(value) {
			if (value == 1) {
				this.loudongku_event = true;
			}
			if (value == 2) {
				this.loudongku_event = false;
			}
		},
		event_classify(value) {
			if (value == 1) {
				this.two_classify = ['电信网络诈骗', '网络赌博', '衍生灰产', '网络环境', '政策动态', '意识形态'];
			}
			if (value == 2) {
				this.two_classify = ['数据安全', '网络攻击', '网络故障', '网络安全漏洞', '手机恶意软件', '政策动态'];
			}
			if (value == 3) {
				this.two_classify = ['中国移动负面', '其他国内运营商负面', '国外运营商负面'];
			}
		},
		event_classify1(value) {
			if (value == "电信网络诈骗") {
				this.three_classify = ['电信网络诈骗', '刷单诈骗', '游戏诈骗', '新冠诈骗', '投资诈骗', '考试诈骗', '社保诈骗', 'ETC诈骗', '银行(卡)诈骗', '快递诈骗'];
			}
			if (value == "网络赌博") {
				this.three_classify = [];
			}
			if (value == "衍生灰产") {
				this.three_classify = ['洗钱', '号卡', '其他',];
			}
			if (value == "网络环境") {
				this.three_classify = [];
			}
			if (value == "政策动态") {
				this.three_classify = [];
			}
			if (value == "意识形态") {
				this.three_classify = ['政治类谣言', '疆域地图', '疆域地图', '领导人', '劣迹人员'];
			}
			if (value == "数据安全") {
				this.three_classify = [];
			}
			if (value == "网络攻击") {
				this.three_classify = [];
			}
			if (value == "网络故障") {
				this.three_classify = [];
			}
			if (value == "网络安全漏洞") {
				this.three_classify = ['国家安全漏洞库'];
			}
			if (value == "手机恶意软件") {
				this.three_classify = [];
			}
			if (value == "政策动态") {
				this.three_classify = [];
			}
			if (value == "中国移动负面") {
				this.three_classify = ['业务负面', '员工涉案事件', '员工涉案事件', '冒用移动名义涉案事件', '通报约谈', '安全生产事故', '其他'];
			}
		},

		addLetters() {
			this.visible3 = true;
		},
		hideModal3() {
			this.visible3 = false;

		},

		weibosofo() {
			this.$router.push({
				path: '/hotspottrackingoverview',

			})
		},

		// 返回列表页
		goHomePage() {
			this.$router.push({
				path: '/hotspottracking',
				query: {flag: 2}
			})
		},

		//添加預警弹框
		showWarning() {
			this.visible = true;
		},
		totals() {
			console.log('111')
			this.$router.push({
				path: '/hotspottrackingoverview',

			})
		},
		onLoadMore() {
			let weibo1 = [];
			let weibo2 = [];
			this.loadingMore = true;
			getIndexMiddle({}).then(res => {
				if (res.code == 0) {
					weibo2 = res.data.weibo.top10.weibo;
					this.weibomsg = this.weibomsg.concat(weibo2)
					console.log(this.weibomsg)
				} else {

					console.log('没有找到')
				}
			}).catch(err => {
				console.log(err)
			});
		},
		getIndexMiddle() {
			var weibo = []
			getIndexMiddle({}).then(res => {
				if (res.code == 0) {
					console.log(res.data.weibo.top10)
					this.loading = false;
					for (let k = 0; k < res.data.weibo.top10.negative.length; k++) {
						weibo.push(res.data.weibo.top10.negative[k])
					}

					weibo.push(res.data.weibo.top10.neutral[0])
					weibo.push(res.data.weibo.top10.positive[0])
					this.weibomsg = weibo
					console.log(weibo)

				} else {

					console.log('没有找到')
				}
			}).catch(err => {
				console.log(err)
			});
		},
		getecharts() {
			const chart1 = this.$refs.chart1
			if (chart1) {
				const myChart = this.$echarts.init(chart1)
				let color = ['#ff5b01', '#fead32', '#1576fe', '#8b4cfe'];
				const option1 = {

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						show: false,
						data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23', '2021-09-24', '2021-09-25', '2021-09-26', '2021-09-27', '2021-09-28']
						}
					],
					yAxis: [
						{
							type: 'value'
						}
					],
					series: [
						{
							name: 'Email',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#879ad8', //改变折线点的颜色
									lineStyle: {
										color: '#879ad8' //改变折线颜色
									}
								}
							},
							data: [120, 132, 101, 134, 90, 230, 210, 220, 210]
						},
						{
							name: 'Union Ads',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#b2db9f', //改变折线点的颜色
									lineStyle: {
										color: '#b2db9f' //改变折线颜色
									}
								}
							},
							data: [220, 182, 191, 234, 290, 330, 310, 220, 210]
						},
						{
							name: 'Video Ads',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#fcd88a', //改变折线点的颜色
									lineStyle: {
										color: '#fcd88a' //改变折线颜色
									}
								}
							},
							data: [150, 232, 201, 154, 190, 330, 410, 220, 210]
						},
						{
							name: 'Direct',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#f49495', //改变折线点的颜色
									lineStyle: {
										color: '#f49495' //改变折线颜色
									}
								}
							},
							data: [320, 332, 301, 334, 390, 330, 320, 220, 210]
						},
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#77be9e', //改变折线点的颜色
									lineStyle: {
										color: '#77be9e' //改变折线颜色
									}
								}
							},
							data: [420, 432, 501, 534, 690, 1030, 1020, 120, 110]
						},
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#fda985', //改变折线点的颜色
									lineStyle: {
										color: '#fda985' //改变折线颜色
									}
								}
							},
							data: [520, 602, 601, 634, 790, 70, 70, 120, 110]
						}
						,
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#b891cc', //改变折线点的颜色
									lineStyle: {
										color: '#b891cc' //改变折线颜色
									}
								}
							},
							data: [720, 732, 701, 734, 1090, 1130, 1120, 220, 210]
						}
						,
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#efa4db', //改变折线点的颜色
									lineStyle: {
										color: '#efa4db' //改变折线颜色
									}
								}
							},
							data: [820, 932, 901, 934, 1290, 1330, 1320, 220, 210]
						}
						,

					]
				}

				myChart.setOption(option1)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			//第二个图表
			const chart2 = this.$refs.chart2
			if (chart2) {

				const myChart = this.$echarts.init(chart2)
				const option2 = {
					xAxis: {
						type: 'category',
						data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23', '2021-09-24', '2021-09-25', '2021-09-26', '2021-09-27', '2021-09-28']
					},
					yAxis: {},
					visualMap: {
						show: false,
						min: 0,
						max: 100,
						splitNumber: 20,
						inRange: {
							color: ['#5eb5e2', '#5eb5e2', '#5eb5e2'].reverse()
						},
						textStyle: {
							color: '#fff'
						}
					},
					series: [
						{
							symbolSize: 20,
							data: [
								[10.0, 8.04],
								[8.07, 6.95],
								[13.0, 7.58],
								[9.05, 8.81],
								[11.0, 8.33],
								[14.0, 7.66],
								[13.4, 6.81],
								[10.0, 6.33],
								[14.0, 8.96],
								[12.5, 6.82],
								[9.15, 7.2],
								[11.5, 7.2],
								[3.03, 4.23],
								[12.2, 7.83],
								[2.02, 4.47],
								[1.05, 3.33],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68]
							],
							type: 'scatter'
						}
					]
				}

				myChart.setOption(option2)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			//第三个图表
			const chart3 = this.$refs.chart3
			if (chart3) {

				const myChart = this.$echarts.init(chart3)
				const option3 = {
					title: {
						text: '近7天趋势',
						left: 'left',

						textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
							fontSize: 15,
							fontStyle: 'normal',
							fontWeight: 'normal',
						},
					},
					xAxis: {
						type: 'category',
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23']
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						splitLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
					},
					series: [
						{
							data: [60, 38, 65, 52, 100],
							type: 'line',
							itemStyle: {
								normal: {
									lineStyle: {  //线的颜色
										color: '#ff5b01'
									},
								},
							},
						}
					]
				}

				myChart.setOption(option3)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
		},
		changeStyle(value) {
			if (value == 1) {
				this.changeSelectStyle = '全部'
			}
			if (value == 2) {
				this.changeSelectStyle = '微博热搜'
			}
			if (value == 3) {
				this.changeSelectStyle = '百度热搜'
			}
			if (value == 4) {
				this.changeSelectStyle = '今日头条'
			}
		},
		changeStyles(value) {
			if (value == 1) {
				this.changeSelectStyles = '全部'
			}
			if (value == 2) {
				this.changeSelectStyles = '社会'
			}
			if (value == 3) {
				this.changeSelectStyles = '互联网'
			}
			if (value == 4) {
				this.changeSelectStyles = '娱乐'
			}
			if (value == 5) {
				this.changeSelectStyles = '国际'
			}
			if (value == 6) {
				this.changeSelectStyles = '财经'
			}
			if (value == 7) {
				this.changeSelectStyles = '游戏'
			}
		},

		//标签弹框
		showLabel() {
			this.visible = true;
		},
		hideModal(checkedValues) {
			this.$message.success('执行成功');
			this.visible = false;
		},

		onChange(checkedValues) {
			console.log('checked = ', checkedValues);
			console.log('checked = ', checkedValues.length);

			this.label = checkedValues;
		},

		suyuan() {
			this.$router.push({
				path: '/generalDetectionroots',

			})
		},
		suyuanNews() {
			this.$router.push({
				path: '/generalDetectionNewsroots',

			})
		},
		changePageInfo() {
			this.$router.push({
				path: '/generalDetectionInfo',
			})
		},

		/*删除*/
		deleteinfomation() {
			this.$message.success("删除成功");
		},
		/*排序*/
		sequenceInfomation() {
			this.orderBy = !this.orderBy;
			getInfo({
				orderBy: this.orderBy
			}).then(res => {
				/*模拟数据变化 生成环境需要更改下面的代码*/
				if (this.orderBy) {
					this.listData = res.data.list;
				} else {
					this.listData = res.data.list.reverse();
				}
				this.pagination.total = this.listData.length;
				this.total = this.listData.length;
			})
		},
		showOtherMedia() {
			this.collspanMedia = !this.collspanMedia;
		},

		tuisong() {
			this.$message.success("推送成功");
		},
		subscribe() {
			this.$message.success("订阅成功");
		},
		collection() {
			this.$message.success("收藏成功");
		},
		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;


			}
		},


	},
	mounted() {
		this.form.ifzp = "2"
		this.form.ifld = "2"
		this.form.ifsearch = "2"
		this.form.vulnerdata = "2"
		/*获取列表的数据*/
		getInfo().then(res => {
			this.listData = res.data.list;
			this.pagination.total = this.listData.length;
			this.total = this.listData.length;
		})

		this.getecharts();
		this.getIndexMiddle()
	},


}
</script>

<style scoped lang="scss">
/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
	margin-left: 0px
}

/deep/ .zhapian_check.ant-checkbox-group {
	line-height: 2.5
}

/deep/ .checkboxs .ant-checkbox-group {
	line-height: 2.5
}

/deep/ .bangdan .ant-form-item-label {
	margin-top: 4px;
	margin-left: 55px
}

/deep/ .bangdan .ant-form-item-control {
	text-align: left;
	line-height: 30px;
	margin-top: -34px;
	margin-left: 132px;
	width: 25px;
}

/deep/ .yujing .ant-form-item-label {
	margin-top: -16px;
	margin-left: 55px
}

/deep/ .yujing .ant-form-item-control {
	text-align: left;
	line-height: 30px;
	margin-top: -47px;
	margin-left: 132px;
	width: 30px;
}

.modal-box2 /deep/ .ant-modal-body {
	min-height: 215px
}

.modal-box2 /deep/ .ant-modal-footer {
	min-height: 60px
}

/deep/ .eventtype.ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype1.ant-select {
	margin-left: -30px !important;
	width: 150px

}

/deep/ .eventtype2.ant-select {
	margin-left: -20px !important;
	width: 150px

}

/deep/ .eventtype3.ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype4 .ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype5 ant-form-item-control {
	//margin-left:20px!important;
	width: 100px

}


/deep/ .ant-progress-text {
	display: none;
}

/deep/ .ant-progress-bg {
	height: 18px
}

/deep/ .addWarning {
	margin: 0;
	padding: 0;
}

/deep/ .addWarning .ant-form-item-label {
	margin-top: 0px;
	margin-left: 0px;
}

/deep/ .addWarning .ant-form-item-control {
	text-align: unset;
	line-height: 30px;
	margin-top: 0px;
	margin-left: 0px;
	width: auto;
	padding-top: 0px;
}

.chart0 {
	height: 572px;
	width: 1074px;
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px
}

.chart1 {
	height: 90%;
	width: 100%;
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px;
	display: flex;
	flex-wrap: wrap
}

.button01 {
	width: 50%;
	background-color: #e8f1ff;
	display: flex;
	justify-content: space-around;
	padding-top: 8px;
	padding-bottom: 8px
}

/deep/ .ant-list-split .ant-list-item {
	border-bottom: 1px solid #f7f7f7;
	margin-left: 20px;
	margin-right: 10px
}

/deep/ .ant-list-item-meta-title {
	margin-bottom: 4px;
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	line-height: 17px;
}

/deep/ .ant-list-item {
	padding: 10px 0;
}

.changeStyle {
	background-color: #1470f2;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	border-radius: 10%;
	font-size: 10px

}

.changeStyles {
	background-color: #1470f2;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	border-radius: 10%;
	font-size: 10px

}

.main {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right: 40px;
}

.addyj {
	margin-left: 1215px;
	margin-bottom: -20px;
	padding: 6px;
	background: url("../../assets/images/generalDetection/addChart.png") left center no-repeat;
	border-radius: 5px;
	background-position: 10px;
	cursor: pointer;
}

.one {
	background-color: #f7f7f7;
	display: flex;
	height: 65px;
	width: 100%;
}

.one_left {
	width: 70%;
	display: flex;
	//justify-content: space-around;
}

.one_right {
	width: 30%;
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
	margin-bottom: 21px
}

.two {
	display: flex;
	height: 550px;
	width: 100%;
}

.two_left {
	width: 68%;
	display: flex;
	flex-wrap: wrap;
	height: 100%

}

.two_right {
	width: 32%;
	display: flex;
	flex-wrap: wrap;
}

.three {
	height: 560px;
	display: flex;
	width: 100%
}

.three_left {
	width: 68%;
	display: flex;
	flex-wrap: wrap;

}

.three_right {
	width: 32%;
	display: flex;
	flex-wrap: wrap;
}

.modal-box /deep/ .ant-modal-body {
	min-height: 500px;
}

.modal-box /deep/ .ant-modal-content {
	height: 600px;
}

.right-content {
	margin-bottom: 40px;
	width: 100%;
	height: 100%;

}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}


/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	border: solid #F0F0F0 1px;
	text-align: center;
	padding-left: 1%;
	padding-right: 1%;
	margin-right: 1%;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.buttonDiv {
	width: 100%;
	height: 70%;
	padding-top: 2%;
	display: flex;
}

@media screen and (max-device-width: 1920px) {
	.buttonDiv {
		height: 85%;
		padding-top: 2%;
		display: flex;
	}
	#pieChart {
		width: 595px;
	}
}


</style>
